<template>
  <div class="container">
    <div class="header">
      <van-icon name="arrow-left" />
      <van-icon name="chat-o" @click="show = true" />
    </div>
    <div class="circle">头像</div>
    <div class="chang">名称</div>
    <div class="cha1">成员</div>
    <div class="cha2">班长</div>
    <div class="main">
      <div class="biao"></div>
      <li>自习室标签</li>
      <div class="shangban">上班族</div>
      <div class="kaozheng">考证</div>
    </div>
    <hr />
    <div class="m2">
      <div class="study"></div>
      <li>学习要求</li>
      <div class="fourhour">每日四小时</div>
    </div>
    <input type="text" />
    <hr />
    <div class="jianjie"></div>
    <li>简介</li>
    <div class="time">创建时间</div>
    <div class="zixi" @click="toEnter">进入自习室</div>

    <van-popup
      v-model="show"
      position="botton"
      :style="{ height: '30%', width: '100%' }"
    >
      <br />
      <p>举报自习室</p>
      <br />
      <p>取消</p>
    </van-popup>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
    };
  },
  methods: {
    // prev() {
    //   this.$router.go(-1);
    // },
    showPopup() {
      this.show = true;
    },
    toEnter() {
      this.$router.push("Enter");
    },
  },
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
.container {
  width: 100%;
  height: 100%;
}
.header {
  width: 750px;
  height: 326px;
  background-color: rgba(239, 239, 239, 100);
  position: relative;
  display: flex;
  justify-content: space-between;
}
.van-top {
  font-size: 24px;
}
.circle {
  width: 132px;
  height: 132px;
  margin-left: 100px;
  margin-top: -252px;
  line-height: 132px;
  font-size: 14px;
  text-align: center;
  border: 1px solid rgba(187, 187, 187, 100);
  border-radius: 50%;
  position: absolute;
}
.chang {
  left: 278px;
  top: 74px;
  width: 400px;
  height: 44px;
  line-height: 44px;
  font-size: 14px;
  text-align: center;
  border: 1px solid rgba(187, 187, 187, 100);
  position: absolute;
}
.cha1 {
  width: 160px;
  height: 44px;
  line-height: 44px;
  color: rgba(16, 16, 16, 100);
  font-size: 14px;
  text-align: center;
  font-family: Arial;
  border: 1px solid rgba(187, 187, 187, 100);
  position: absolute;
  left: 280px;
  top: 164px;
}
.cha2 {
  width: 160px;
  height: 44px;
  line-height: 44px;
  color: rgba(16, 16, 16, 100);
  font-size: 14px;
  text-align: center;
  font-family: Arial;
  border: 1px solid rgba(187, 187, 187, 100);
  position: absolute;
  left: 520px;
  top: 164px;
}
.main {
  width: 750px;
  height: 80px;
  position: relative;
  margin-top: 20px;
}
.biao {
  left: 150px;
  width: 68px;
  height: 68px;
  margin-left: -7.125rem;
  margin-top: -1.375rem;
  line-height: 68px;
  background-color: rgba(239, 239, 239, 100);
  border: 1px solid rgba(187, 187, 187, 100);
  border-radius: 50%;
  position: absolute;
}
.shangban {
  left: 330px;
  width: 120px;
  height: 40px;
  line-height: 40px;
  border-radius: 6px;
  margin-top: -28px;
  background-color: rgba(239, 239, 239, 100);
  color: rgba(136, 136, 136, 100);
  font-size: 14px;
  text-align: center;
  font-family: Microsoft Yahei;
  border: 1px solid rgba(187, 187, 187, 100);
  position: absolute;
}
.kaozheng {
  left: 491px;
  width: 120px;
  height: 40px;
  line-height: 40px;
  border-radius: 6px;
  margin-top: -28px;
  background-color: rgba(239, 239, 239, 100);
  color: rgba(136, 136, 136, 100);
  font-size: 14px;
  text-align: center;
  font-family: Microsoft Yahei;
  border: 1px solid rgba(187, 187, 187, 100);
  position: absolute;
}
.m2 {
  width: 750px;
  height: 80px;
  position: relative;
  margin-top: 20px;
}
.study {
  left: 2.375rem;
  width: 68px;
  height: 68px;
  margin-top: -1.375rem;
  line-height: 68px;
  background-color: rgba(239, 239, 239, 100);
  border: 1px solid rgba(187, 187, 187, 100);
  border-radius: 50%;
  position: absolute;
}
.fourhour {
  width: 200px;
  height: 40px;
  line-height: 40px;
  border-radius: 6px;
  margin-top: -28px;
  margin-left: 388px;
  background-color: rgba(239, 239, 239, 100);
  color: rgba(136, 136, 136, 100);
  font-size: 14px;
  text-align: center;
  font-family: Microsoft Yahei;
  border: 1px solid rgba(187, 187, 187, 100);
  position: absolute;
}
input {
  margin: 40px;
  width: 611px;
  height: 50px;
  background-color: rgba(239, 239, 239, 100);
  text-align: left;
  border: 1px solid rgba(187, 187, 187, 100);
}
.jianjie {
  left: 2.375rem;
  margin-top: 20px;
  width: 68px;
  height: 68px;
  line-height: 68px;
  background-color: rgba(239, 239, 239, 100);
  border: 1px solid rgba(187, 187, 187, 100);
  border-radius: 50%;
  position: absolute;
}
.time {
  left: 15.625rem;
  width: 166px;
  height: 40px;
  line-height: 40px;
  margin-top: -2.375rem;
  border-radius: 6px;
  background-color: rgba(239, 239, 239, 100);
  color: rgba(136, 136, 136, 100);
  font-size: 14px;
  text-align: center;
  font-family: Microsoft Yahei;
  border: 1px solid rgba(187, 187, 187, 100);
  position: absolute;
}
.zixi {
  margin-left: 150px;
  margin-top: 200px;
  width: 400px;
  height: 98px;
  line-height: 98px;
  border-radius: 20px;
  background-color: rgba(239, 239, 239, 100);
  color: rgba(16, 16, 16, 100);
  font-size: 14px;
  text-align: center;
  font-family: Arial;
  border: 1px solid rgba(187, 187, 187, 100);
}
.van-popup {
  text-align: center;
}
li {
  margin-left: 8.375rem;
  margin-top: 2.9375rem;
}
</style>
